<template>










  <div>

    <!--1.视图-->
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="名称">
        <el-input v-model="formInline.deptName" placeholder="名称"></el-input>
      </el-form-item>
      <el-form-item label="状态" style="line-height: 10px">
        <el-select v-model="formInline.status" placeholder="请选择状态">
          <el-option label="正常" value="0"></el-option>
          <el-option label="停用" value="1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="list">查询</el-button>
        <el-button type="primary" @click="openAdd">添加</el-button>
        <el-button type="primary" @click="excels">excel导出</el-button>
        <el-button type="primary" @click="getchongzhi">重置按钮</el-button>
        <el-button type="primary" @click="dr">导入</el-button>
      </el-form-item>


      <el-upload
          class="upload-demo"
          drag
          action="http://localhost:8100/system/excels"
          multiple>
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
      </el-upload>
    </el-form>
    <el-table
        :data="tableData"
        style="width: 100%;margin-bottom: 20px;"
        row-key="id"
        border
        default-expand-all
        :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
      <el-table-column
          prop="deptName"
          label="部门名称"
          width="180">
      </el-table-column>
      <el-table-column
          prop="orderNum"
          label="显示顺序"
          width="300">
      </el-table-column>
      <el-table-column
          label="状态"
          width="180">
        <template slot-scope="scope">
          <el-popover placement="top">
            <div slot="reference" class="name-wrapper">
              <el-tag size="medium">{{ scope.row.status == "0" ? "正常" : "停用" }}</el-tag>
            </div>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column
          prop="createTime"
          label="创建时间"
          width="180">
      </el-table-column>
      <el-table-column
      prop="files"
      label="图片"
      width="180">
       <template v-slot="s">
        <el-image
            style="width: 100px; height: 100px"
            :src=s.row.files
        >
        </el-image>
       </template>

      </el-table-column>
      <el-table-column
          fixed="right"
          label="操作"
          width="100">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row.deptId)" type="text" size="small">修改</el-button>
          <el-button @click="del(scope.row.deptId)" type="text" size="small">删除</el-button>
          <el-button type="text" size="small">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>



    <el-dialog title="添加" :visible.sync="dialogFormVisible">
      <el-form :model="form" :rules="rules" ref="ruleForm" >
        <el-form-item label="上级部门" :label-width="formLabelWidth" prop="parentId">
          <el-select v-model="form.parentId" placeholder="请选择上级部门">
            <el-option :label="selectedNodeName" :value="deptId"></el-option>
            <el-tree :data="tableData" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
          </el-select>
        </el-form-item>
        <el-form-item label="部门名称" prop="deptName" :label-width="formLabelWidth">
          <el-input v-model="form.deptName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="显示顺序" :label-width="formLabelWidth">
          <el-input v-model="form.orderNum" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="负责人" :label-width="formLabelWidth">
          <el-input v-model="form.leader" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="联系电话" :label-width="formLabelWidth">
          <el-input v-model="form.phone" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" :label-width="formLabelWidth">
          <el-input v-model="form.email"  autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="部门状态" prop="resource">
          <el-radio-group v-model="form.status">
            <el-radio label="0" value="0">正常</el-radio>
            <el-radio label="1" value="1">停用</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="图片" :label-width="formLabelWidth">
          <el-upload
              class="avatar-uploader"
              action="http://localhost:8100/system/upload"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload">
            <img v-if="imageUrl" :src="imageUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="add('ruleForm')">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="修改" :visible.sync="dialogFormVisible1">
      <el-form :model="form1">
        <el-form-item label="上级部门" :label-width="formLabelWidth" prop="parentId">
          <el-input v-model="selectedNodeName" @focus="showTree = true"></el-input>
          <el-popover
              ref="treePopover"
              v-model="showTree"
              placement="bottom-start"
              width="300"
              trigger="click">
            <el-tree
                v-if="refreshTable"
                :data="data"
                :props="defaultProps"
                :default-expand-all="isExpandAll"
                node-key="id"
                @current-change="handleNodeClick">
            </el-tree>
          </el-popover>
        </el-form-item>

        <el-form-item label="部门名称" :label-width="formLabelWidth">
          <el-input v-model="form1.deptName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="显示顺序" :label-width="formLabelWidth">
          <el-input v-model="form1.orderNum" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="负责人" :label-width="formLabelWidth">
          <el-input v-model="form1.leader" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="联系电话" :label-width="formLabelWidth">
          <el-input v-model="form1.phone" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" :label-width="formLabelWidth">
          <el-input v-model="form1.email"  autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="部门状态" prop="resource">
          <el-radio-group v-model="form1.status">
            <el-radio label="0" value="0">正常</el-radio>
            <el-radio label="1" value="1">停用</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="uplore">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "ListView",
  data() {
    return {
      tableData:[],
      formInline:{},
      size:3,
      total: 0,
      current: 1,
      dialogFormVisible:false,
      dialogFormVisible1:false,
      form:{status:'0'},
      form1:{},
      showTree:false,
      selectedNodeName:null,
      isExpandAll:true,
      defaultProps: {
        children: 'children',
        label: 'deptName'
      },
      refreshTable:true,
      deptName:'',
      deptId:'',
      data:[],
      imageUrl:'',
      formLabelWidth1:'120px',
      rules: {
        deptName: [
          {required: true, message: '请输入部门名称', trigger: 'blur'},
          {min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur'}
        ],
      }
    }
  }, methods: {
    handleNodeClick(data) {
      this.form1.parenId=data.id;
      this.selectedNodeName=data.name;
      this.showTree=false;
    },
    getchongzhi()
    {
      window.location.href
    },
    //3.自定义函数
    list(){
      this.axios.post("/system/list",this.formInline).then(res=>{
        this.tableData = res.data.data;
      })
    },
    openAdd(){
      this.dialogFormVisible=true;
      this.form={status:'0'}
    },

    add(){
      // this.$refs[formName].validate((valid) => {
      //   if (valid) {
      //
      //   } else {
      //     console.log('error submit!!');
      //     return false;
      //   }
      // });
      this.axios.post("/system/add",this.form).then(res=>{
        if(res.data.code==200){
          this.$message.success(res.data.msg);
          this.dialogFormVisible=false;
          this.list();
        }else {
          this.$message.error(res.data.msg);
        }
      })
    },
    handleClick(id){
      this.dialogFormVisible1=true;
      this.axios.post("/system/deptGetDept?id="+id).then(res=>{
        this.form1=res.data.data;
        this.selectedNodeName=res.data.data.pname;
        console.log(res.data.data)
        console.log(this.list1)
        this.list1();

      })
    },
    list1(){
      this.axios.post("/system/deptList",this.formInline).then(res=>{
        this.data = res.data.data;
      })
    },
    uplore(){
      this.axios.post("/system/uplore",this.form1).then(res=>{
        if(res.data.code ==200){
          this.$message.success(res.data.msg);
          this.dialogFormVisible1=false;
          this.list();
        }else {
          this.$message.error(res.data.msg);
        }
      })
    },
    del(deptId){
      this.axios.post("/system/remove?deptId="+deptId).then(res=>{
        if(res.data.code ==200){
          this.$message.success(res.data.msg);
          this.list();
        }else {
          this.$message.error(res.data.msg);
        }
      })
    },
    excels(){
      window.location.href=this.axios.defaults.baseURL+"/system/excel"
    },
    handleAvatarSuccess(res,files) {
      this.imageUrl=URL.createObjectURL(files.raw)
      this.form.files=res
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },
    dr(){
      window.location.href=this.axios.defaults.baseURL+"/system/excels"
    },
  }, created() {
    //4.钩子函数
    this.list();
  }
}
</script>

<style scoped>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>